<template>
  <div class='page-content'>
    <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="90px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="IP：">
                <el-input v-model="word" placeholder="IP"></el-input>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <el-table :data="lists" :showPage="false" border ref="table">
      <el-table-column label="ID" width="80" prop="id" v-if="columns[0].show"/>
      <el-table-column label="登录IP" width="240" prop="ip" v-if="columns[1].show"/>
      <el-table-column label="登录者" width="240" prop="admin_name" v-if="columns[2].show"/>
      <el-table-column label="操作方法" width="300" prop="action" v-if="columns[3].show"/>
      <el-table-column label="登录时间" width="160" prop="create_time" v-if="columns[4].show"/>
    </el-table>
    <template v-if="allpage>10">
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-size="10"
                     layout="total, prev, pager, next, jumper"
                     :total="allpage">
      </el-pagination>
    </template>
  </div>
</template>

<script>
import {getLoginLogList} from '@/api/admin/loginLogApi';

export default {
  data() {
    return {
      lists: [],
      allpage: 1,//总页数
      showItem: 5,//分页显示得中间按钮个数
      current: 1,//当前页
      word: '',
      model: {},
      columns: [
        {name: "ID", show: true},
        {name: "登录IP", show: true},
        {name: "登录者", show: true},
        {name: "操作action", show: true},
        {name: "登录时间", show: true},
      ],
    };
  },
  created: function () {
    this.handleCurrentChange(1);
  },
  methods: {
    reset: function () {
      this.word = '';
    },
    search: function () {
      this.handleCurrentChange(1);
    },
    handleCurrentChange: function (index) {
      this.current = index;
      getLoginLogList({
        page: index,
        word: this.word,
      }).then(res => {
        this.lists = res.data.lists;
        this.allpage = res.data.allpage;
      })
    },
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.table.doLayout()
    },
  }
}
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
</style>
